<template>
  <div class="div-rolling-layers" v-if="isVisible">
    <el-row class="div-rolling-container">
      <el-col :span="2" style="font-size:15px;text-align:center;color:#000">{{imgLayers.length}}</el-col>
      <el-col :span="9">
        <el-row>
          <el-col :span="6" class="text-altras">
            <span>左侧</span>
          </el-col>
          <el-col :span="18">
            <el-select
              size="mini"
              class="el-select-rolling left"
              v-model="leftSelectLayer"
              placeholder="请选择左侧图层"
              @change="leftSelectChange"
            >
              <el-option
                v-for="imgLayer in imgLayers"
                :key="imgLayer._id"
                :value="imgLayer._id"
                :label="imgLayer.name"
              ></el-option>
            </el-select>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="9">
        <el-row>
          <el-col :span="18">
            <el-select
              size="mini"
              class="el-select-rolling right"
              v-model="rightSelectLayer"
              placeholder="请选择右侧图层"
              @change="rightSelectChange"
            >
              <el-option
                v-for="imgLayer in imgLayers"
                :key="imgLayer._id"
                :value="imgLayer._id"
                :label="imgLayer.name"
              ></el-option>
            </el-select>
          </el-col>
          <el-col :span="6" class="text-altras">
            <span>右侧</span>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="3" style="text-align:right;">
        <el-button icon="el-icon-refresh" size="mini" circle @click="$emit('onReload')"></el-button>
        <el-button icon="el-icon-delete" size="mini" circle @click="$emit('onClear',leftLastSelectLayer,rightLastSelectLayer)"></el-button>
      </el-col>
     
    </el-row>
  </div>
</template>

<script>
import { list } from "@/api/yxwh/ygjc";

export default {
  name: "index",
  data: function() {
    return {
      leftSelectLayer: undefined,
      rightSelectLayer: undefined,
      leftLastSelectLayer: undefined,
      rightLastSelectLayer: undefined
    };
  },
  props: {
    isVisible: {
      type: Boolean,
      default: false
    },
    imgLayers: {
      type: Array,
      default: function() {
        return [];
      }
    }
  },
  methods: {
    /**
     * 左侧图层选择
     * @param $event
     */
    leftSelectChange($event) {
      this.imgLayers.forEach(layer => {
        if (layer._id === $event) {
          //TODO 超图发布的服务
          this.$emit(
            "onRsLayerSelected",
            "left",
            layer,
            this.leftLastSelectLayer
          );
          this.leftLastSelectLayer = layer;
        }
      });
    },
    /**
     * 右侧图层选择
     * @param $event
     */
    rightSelectChange($event) {
      this.imgLayers.forEach(layer => {
        if (layer._id === $event) {
          this.$emit(
            "onRsLayerSelected",
            "right",
            layer,
            this.rightLastSelectLayer
          );
          this.rightLastSelectLayer = layer;
        }
      });
    },

    emptySelector() {
      (this.leftSelectLayer = undefined), (this.rightSelectLayer = undefined);
    }
  },
  mounted() {},
  watch: {
    isVisible: function(n, o) {
      this.leftSelectLayer = undefined;
      this.rightSelectLayer = undefined;
    }
  }
};
</script>

<style scoped>
.div-rolling-layers {
  display: block;
  position: relative;
}

.div-rolling-layers .div-rolling-container {
  position: absolute;
  display: flex;
  top: 5px;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: 3;
  justify-content: center;
  background: #fff;
  width: 598px;
  align-items: center;
  border-radius: 5px;
  border: 2px solid #1685d8;
  padding: 2px;
}
.div-rolling-refresh {
  position: absolute;
  display: flex;
  top: 5px;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: 3;
  justify-content: center;
  background: #fff;
  width: 98px;
  align-items: center;
  border-radius: 5px;
  border: 2px solid #1685d8;
  padding: 2px;
}

.div-rolling-layers .text-altras {
  position: relative;
  text-align: center;
  line-height: 28px;
  color: #000;
}

.div-rolling-container .left {
  float: right;
}

.div-rolling-container .right {
  float: left;
}
</style>
